import { useMemo } from 'react'
import styles from './index.module.less'

export default function (props) {
    const { percent = 0, height = 8, radius = 5, backBg = '#E5E6E8', frontBg = '#0089FF' } = props

    const ProgressBar = useMemo(() => {
        return (
            <div
                style={{
                    width: '100%',
                    height: `${height / 50}rem`,
                    background: backBg,
                    borderRadius: `${radius / 50}rem`,
                }}
            >
                <div
                    className={styles.progress}
                    style={{
                        background: frontBg,
                        borderRadius: `${radius / 50}rem`,
                        width: `${percent >= 100 ? 100 : percent}%`,
                    }}
                />
            </div>
        )
    }, [percent])

    return ProgressBar
}
